<template>
  <div :id="elId" class="word_cloud"></div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-wordcloud";

import { v4 as uuidv4 } from "uuid";

export default {
  props: ["data"],
  data() {
    return {
      elId: "",
      tags: [
        {
          w: 1,
          t: "A Two-Parameter Class Of States",
        },
        {
          w: 45,
          t: "Qubit-Qutrit Systems",
        },
        {
          w: 3,
          t: "Entanglement Sudden Death",
        },
        {
          w: 25,
          t: "Electron-Spin States",
        },
        {
          w: 13,
          t: "Entanglement Concentration",
        },
        {
          w: 68,
          t: "Quantum Communication",
        },
        {
          w: 7,
          t: "Dynamics Of Entanglement",
        },
        {
          w: 1,
          t: "Dissipative Channels",
        },
        {
          w: 1,
          t: "Decoherence",
        },
      ],
    };
  },
  methods: {
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(this.elId));

      var data = [];
      for (var i in this.tags) {
        data.push({
          name: this.tags[i].t,
          /* value: Math.sqrt(this.tags[i].w), */
          value: this.tags[i].w,
        });
      }
      console.log(data);
      var option = {
        tooltip: {},
        series: [
          {
            type: "wordCloud",
            gridSize: 2,
            sizeRange: [12, 45],
            rotationRange: [0,0],
            /* shape: "pentagon", */
            width: 700,
            height: 300,
            drawOutOfBound: true,
            textStyle: {
              color: function () {
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                  ].join(",") +
                  ")"
                );
              },
            },
            data: data.sort(function (a, b) {
              return b.value - a.value;
            }),
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
    this.myEcharts();
  },
  created() {
    this.elId = uuidv4(); //获取随机id
  },
};
</script>

<style scoped>
.word_cloud {
  width: 700px;
  height: 200px;
  /* background-color: rgb(212, 212, 255); */
}
</style>